<template>
    <view ref="main" class="globe_back">
        <u-navbar title="同路仁店铺" @rightClick="rightClick" :autoBack="true" placeholder="true"></u-navbar>
        <div class="cont" @click="close">
            <div v-for="(item, index) in list" :key="index">
                <div class="item flex" v-if="item.side == 1">
                    <div class="imgcont">
                        <image class="img mr-20" :src="item.url" mode="widthFix"></image>
                    </div>
                    <div class="msg_cont bg_fff" v-if="item.content">
                        {{ item.content }}
                    </div>
                    <div class="msg_cont bg_fff" v-if="item.img">
                        <image class="sendImg" @click="previewImage(item.img)" mode="aspectFit" :src="item.img"></image>
                    </div>
                </div>
                <div class="item flex jRight" v-else>
                    <div class="msg_cont bg_blue" v-if="item.content">
                        {{ item.content }}
                    </div>
                    <div class="msg_cont bg_fff" v-if="item.img">
                        <image class="sendImg" @click="previewImage(item.img)" mode="aspectFit" :src="item.img"></image>
                    </div>
                    <div class="imgcont">
                        <image class="img ml-20" :src="item.url"></image>
                    </div>
                </div>
            </div>
        </div>
        <div class="h150" :class="{ h550: isShow }"></div>
        <div class="input_item bg_fff" :class="{ emojiAnimate: isShow }">
            <div class="flex bottom_padding h150 a-center">
                <div class="flex_1">
                    <input type="text" class="oinput" :focus="cursor" :cursor="resStart" @blur="cursorss" @confirm="sendMsg" placeholder="请输入您的诉求" v-model="infoVal" />
                </div>
                <div class="flex ml-20 a-center">
                    <image class="bqIcon" src="@/static/imgs/icon_bq.png" mode="widthFix" @click="showEmoji"></image>
                    <image v-if="!isSend" @click="camaraDone" class="bqIcon" src="@/static/imgs/icon_jh.png" mode="widthFix"></image>
                    <u-button iconColor="#3377FF" type="primary" v-else size="mini" text="发送" @click="sendMsg"></u-button>
                </div>
            </div>
            <!-- 表情区域 -->
            <div>
                <div class="emojiBox" v-if="otype == 1">
                    <scroll-view class="emojis_scroll" :scroll-x="false" :scroll-y="true">
                        <view v-for="item in emoji" :key="item.emoji" class="emoji" @click="ChooseToLook(`${item.emoji}`)">{{ item.emoji }}</view>
                    </scroll-view>
                </div>
                <div class="emojiBox" v-else>
                    <div class="imgCont flex">
                        <view class="sendPhoto">
                            <image class="logdPhoto" src="@/static/imgs/tp.png" @click="UpLoadPhoto" mode="widthFix"></image>
                            <view>相册</view>
                        </view>
                        <view class="sendPhoto">
                            <image class="logdPhoto" src="@/static/imgs/qz.png" @click="UpLoadPhoto(1)" mode=""></image>
                            <view>拍照</view>
                        </view>
                    </div>
                </div>
            </div>
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            infoVal: '',
            resStart: 0, //input光标位置
            otype: 0, // otype:1 显示表情包 otype：2 显示上传图片或者拍照
            cursor: false, //是否聚焦
            isSend: false,
            isShow: false,
            emoji: [
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??️'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                },
                {
                    emoji: '??'
                }
            ],
            list: [
                {
                    url: 'https://img.zcool.cn/community/015a605f45ac07a80120a8218319a8.jpg@1280w_1l_2o_100sh.jpg',
                    content: '江河湖海江河湖海江河',
                    side: 1
                },
                {
                    url: 'http://t14.baidu.com/it/u=952348003,139019328&fm=224&app=112&f=JPEG?w=500&h=500',
                    content:
                        '测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容',
                    side: 2
                },
                {
                    url: 'https://img.zcool.cn/community/015a605f45ac07a80120a8218319a8.jpg@1280w_1l_2o_100sh.jpg',
                    content:
                        '江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海111',
                    side: 1
                },
                {
                    url: 'http://t14.baidu.com/it/u=952348003,139019328&fm=224&app=112&f=JPEG?w=500&h=500',
                    content:
                        '测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容222',
                    side: 2
                },
                {
                    url: 'https://img.zcool.cn/community/015a605f45ac07a80120a8218319a8.jpg@1280w_1l_2o_100sh.jpg',
                    content:
                        '江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海',
                    side: 1
                },
                {
                    url: 'http://t14.baidu.com/it/u=952348003,139019328&fm=224&app=112&f=JPEG?w=500&h=500',
                    content:
                        '测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容',
                    side: 2
                },
                {
                    url: 'https://img.zcool.cn/community/015a605f45ac07a80120a8218319a8.jpg@1280w_1l_2o_100sh.jpg',
                    content:
                        '江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海江河湖海111',
                    side: 1
                },
                {
                    url: 'http://t14.baidu.com/it/u=952348003,139019328&fm=224&app=112&f=JPEG?w=500&h=500',
                    content:
                        '测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容222',
                    side: 2
                }
            ]
        };
    },
    watch: {
        infoVal(val) {
            val.length > 0 ? (this.isSend = true) : (this.isSend = false);
        }
    },
    onShow() {
        this.doneBottom();
    },
    methods: {
        rightClick() {
            console.log('rightClick');
        },
        // 预览图片
        previewImage(url) {
            uni.previewImage({
                urls: [url]
            });
        },
        // 选择相册
        UpLoadPhoto(num) {
            let sourceType = ['album']; //默认从相册选择图片
            if (num == 1) {
                //拍照获取图片
                sourceType = ['camera'];
            }
            uni.chooseMedia({
                count: 1, //选择上传数量
                mediaType: ['image'], //文件类型
                sourceType: sourceType, //图片和视频选择的来源
                success: (res) => {
                    let data = res.tempFiles;
                    this.list.push({
                        url: 'http://t14.baidu.com/it/u=952348003,139019328&fm=224&app=112&f=JPEG?w=500&h=500',
                        img: data[0].tempFilePath,
                        side: 2
                    });
                    this.doneBottom(); //滚动到底部
                },
                fail: (err) => {
                    if (err) {
                        uni.showToast({
                            title: '获取失败',
                            icon: 'error'
                        });
                    }
                }
            });
        },
        // 显示上传图标区域
        camaraDone() {
            this.otype = 2;
            this.isShow = true;
        },
        // 关闭表情内容
        close() {
            this.isShow = false;
        },
        // 失去焦点时获取当前光标的位置
        cursorss(event) {
            this.cursor = false; //取消聚焦
            this.resStart = event.target.cursor; //保存光标位置
        },
        //展示表情框
        showEmoji() {
            this.isShow = !this.isShow;
            this.otype = 1;
        },
        // 选择表情
        ChooseToLook(val) {
            // 返回获取从0到光标位置的字符串
            let str = this.infoVal.substring(0, this.resStart);
            // 将表情插入指定位置
            this.infoVal = this.infoVal.replace(str, str + val);
            // 光标向后移动两位
            this.resStart += 2; //光标加2(表情是占两个位置)
            this.cursor = true; //设置聚焦
        },
        // 点击发送
        sendMsg() {
            this.list.push({
                url: 'http://t14.baidu.com/it/u=952348003,139019328&fm=224&app=112&f=JPEG?w=500&h=500',
                content: this.infoVal,
                side: 2
            });
            this.infoVal = '';
            this.doneBottom(); //滚动到底部
        },
        //滚动到底部
        doneBottom() {
            this.$nextTick(() => {
                uni.pageScrollTo({
                    scrollTop: 9999999,
                    duration: 300
                });
            });
        }
    }
};
</script>
<style>
page {
    background: #f7faff;
}
</style>
<style lang="scss" scoped>
.bqIcon {
    width: 44rpx;
    height: 44rpx;
    margin-right: 28rpx;
}
.sendPhoto {
    text-align: center;
    color: #999ca3;
    font-size: 28rpx;
}
.logdPhoto {
    width: 100rpx;
    height: 100rpx;
    margin: 20rpx 20rpx 10rpx;
}
.input_item {
    position: fixed;
    z-index: 999;
    bottom: -400rpx;
    transition: bottom 0.3s;
    left: 0;
    right: 0;
}
.oinput {
    width: 502rpx;
    height: 76rpx;
    background: #f7f7f7;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 0 20rpx;
    font-size: 28rpx;
}
.input_item.emojiAnimate {
    bottom: 0 !important;
}
.emojis_scroll {
    display: block;
    float: left;
    width: 100%;
    height: 400rpx;
    padding-left: 25rpx;
}
.imgCont {
    width: 100%;
    height: 400rpx;
    padding-left: 25rpx;
    align-items: flex-start;
}
.emoji {
    display: block;
    float: left;
    width: 100rpx;
    height: 100rpx;
    font-size: 50rpx;
    text-align: center;
}
.h150 {
    height: 150rpx;
}
.jRight {
    justify-content: flex-end;
}
.bottom_padding {
    padding: 20rpx 40rpx;
}
.a-center {
    align-items: center;
}
.flex {
    display: flex;
}
.flex_1 {
    flex: 1;
}
.h550 {
    height: 560rpx !important;
}
.bg_eee {
    background-color: #eee;
}
.img {
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
}
.mr-20 {
    margin-right: 20rpx;
}
.ml-20 {
    margin-left: 20rpx;
}
.item {
    padding: 20rpx 40rpx;
    margin-bottom: 30rpx;
}
.bg_fff {
    background: #fff;
}
.bg_blue {
    background: #3377ff;
    color: #fff;
}
.msg_cont {
    max-width: 542rpx;
    word-break: break-all;
    padding: 20rpx;
    border-radius: 20rpx;
    box-shadow: 0 10rpx 10rpx #ddd;
    font-size: 28rpx;
}
.sendImg {
    max-width: 542rpx;
}
</style>
